<template>
	<view class="content pc-tou-gao " >
		<view class="scroll-fix" >

		
			<view class="d-kuan-juzhong ">
				<!--头部-->
				<view class="d-kuan pc-dingbu ">
					<DToubu 
					@login-success="handleLoginSuccess" 
					@logout-success="handleLogout"
					:dengluxianshi="denglu_xianshi"
					@update-dengluxianshi="handleUpdateDengluxianshi"
					></DToubu>
					
				</view>
				


				<!--头部-->
				<!--下面内容-->
				<view class="d-kuan d-clear">
					<uv-row customStyle="margin-bottom: 10px" :gutter="10">
						<uv-col span="2" class="pc-yincang">
							<!--左边导航-->
							<view class="d-daohang d-you-10 pc-yincang d-y-gundong d-shang-20" id="zuo-daohang" :style="{height: leftNavHeight}">
								<view class="d-daohang-5 " >
									<Ddaohang 
									@denglu-fabu="denglu_fabu"
									
									></Ddaohang>
								</view>
							</view>
						</uv-col>

						<uv-col :span="kuan_shu">
							
							<view class="d-shang-50">
								<view class="d-waikuang-20-0 d-beijing-bai ">
									<!--头部-->
										<Dfanhui
										:title="'设置'"
										>

									</Dfanhui>
									
									<uv-cell-group>
										<uv-cell title="头像设置" :titleStyle="{ fontSize: '38rpx' }" @click="url('touxiang')">
											<template v-slot:value>
												
												<uv-image :src="u_data.wo && u_data.wo.avatar" width="40px" height="40px" shape="circle"></uv-image>
											</template>
											<!-- 自定义右侧图标 -->

										</uv-cell>
										<uv-cell title="登录用户名" :titleStyle="{ fontSize: '38rpx' }">
											<template v-slot:value>
												<text class="d-wenzi-18 d-wenzi-yanse-hongse" style="height:30px;line-height:30px;">{{ u_data.wo && u_data.wo.username }}</text>
											</template>
											<!-- 自定义右侧图标 -->
											
										</uv-cell>
										<uv-cell title="昵称设置" :titleStyle="{ fontSize: '38rpx' }" @click="url('yonghuming')">
											<template v-slot:value>
												<text class="d-wenzi-16 d-wenzi-yanse-hongse" style="height:30px;line-height:30px;">{{ u_data.wo && u_data.wo.name }}</text>
											</template>
											<!-- 自定义右侧图标 -->
											<template v-slot:right-icon>
												<uv-icon size="30rpx"  name="arrow-right" ></uv-icon>
											</template>
										</uv-cell>
										<uv-cell title="密码设置" :titleStyle="{ fontSize: '38rpx' }"  @click="url('mima')">
											<template v-slot:value>
												<text style="height:30px;line-height:30px;">******</text>
											</template>
											<!-- 自定义右侧图标 -->
											<template v-slot:right-icon>
												<uv-icon size="30rpx" name="arrow-right"></uv-icon>
											</template>
										</uv-cell>
										
									</uv-cell-group>


								</view>

							</view>
							
							
							
															
							
							<view class="pc-neikuang-20-list" >
								
							</view>
							
							<!--头部背景-->
							
							
						</uv-col>
						<uv-col span="3" class="pc-yincang">
							<view class="d-daohang d-you-10 pc-yincang d-shang-20" id="zuo-daohang" :style="{height: leftNavHeight}">
								<view class="d-you-kuang">
									
								</view>
							</view>
						</uv-col>
					</uv-row>

					

				</view>
				<!--下面内容-->


			</view>

			<view class="d-clear"></view>
		
		</view>
		
		

	</view>
</template>

<script>
    import Api from '@/utils/api.js'; 
	import QuanApi from '@/utils/quan_api.js';
	import UApi from '@/utils/u_api.js';
	import { getRequest,postRequest } from '@/utils/wxRequest.js';
    //引入组件 d-toubu
    import DToubu from '@/components/d-toubu/d-toubu.vue'
	import Ddaohang from '@/components/d-daohang/d-daohang.vue'
	import Dweibu from '@/components/d-weibu/d-weibu.vue'
	import Dfanhui from '@/components/d-fanhui/d-fanhui.vue'
	
	
	export default {
		data() {
			return {
				
				title: 'Hello',
				leftNavHeight: '500rpx', // 默认高度
                rightColWidth: '300px', // 默认宽度
				rightColLeft: '0px', // 添加这个属性
				daohang: [
					{
						id:'1',
						name: '首页', 
						icon: 'home',

					},
					{
						id:'2',
						name: '心理学',
						icon: 'home',
						erji: [	
							{id: '2-1', name: '情绪管理'},
					    	{id: '2-2', name: '心理疗愈'},
					    	{id: '2-3', name: '行为心理学'}
						]
					},
					
				],
				erjidata:[],
				erjiindex:'',//当前激活的二级菜单索引
				activeIndex: -1, // 当前激活的一级菜单索引
				zhishi_tuijian_data:[], // 知识推荐数据
				zhishi_daohang_list:[], // 知识导航列表
				zhishi_list:[], // 知识列表
				haibao_data:[], // 海报数据
				imageSize: {
        		    width: 0,
        		    height: 0
        		},
				tubiaolist: 
				['integral', 'kefuv-ermai', 'coupon', 'gift', 'scan',
					'pause-circle', 'volume-off', 'email', 'list'
				],
				denglu_xianshi:0, // 登录显示

				tiezi_list:[], // 帖子列表

				currentPage: 1, //下拉加载
    			pageSize: 12, //下拉加载
    			isLoading: false, //下拉加载
    			noMoreData: false, //下拉加载
				
				kuan_shu: 7, //格大小
				uid: '', // 用户ID - 初始化为空字符串，将在onLoad/onShow中设置
				swiperHeight: '250',
				gao: '20', //图片高度
				
				quan_data:[],
				
				shenhe_shu:0,//审核帖子数量
				u_data:[], // 用户信息
				dataLoaded: false,
			
				guanzhu_panduan:0,
				



			}
		},
		components: {
  		    DToubu,
			Ddaohang,
			Dweibu,
			Dfanhui
  		},
		mounted() {
			// 确保在组件挂载后更新uid
			console.log('Component mounted, checking uid...');
			const storeUid = this.$store.state.memberuid;
			if (storeUid && !this.uid) {
				this.uid = storeUid;
				console.log('UID set from store in mounted:', this.uid);
			}
			
    	    this.setLeftNavHeight();
			this.getRightColWidth(); // 添加这行
    	    // 添加窗口大小变化监听
    	    window.addEventListener('resize', this.setLeftNavHeight);
			window.addEventListener('resize', this.getRightColWidth); // 添加窗口大小变化监听
			var e = this;
			//this.onImageLoad(e);
    	},
    	beforeDestroy() {
    	    // 移除监听
    	    window.removeEventListener('resize', this.setLeftNavHeight);
			window.removeEventListener('resize', this.getRightColWidth); // 添加这行
    	},
		onShow() {
			console.log('Component shown, updating uid...');
			const storeUid = this.$store.state.memberuid;
			console.log('Store memberuid:', storeUid);
			this.uid = storeUid;
			console.log('UID set in onShow:', this.uid);

			if(!storeUid){
				console.log('No uid in store, showing login prompt');
				this.denglu_xianshi = 1;
				this.godenglu(); // 暂时注释掉自动跳转，便于调试
			}

			//this.getShenhe_shu_api();
			
		},
		onLoad(e) {
			console.log('Component loaded with params:', e);
			// 优先使用路由参数中的uid
			if (e && e.uid) {
				this.uid = e.uid;
				console.log('UID set from route params:', this.uid);
			} else {
				// 如果路由参数中没有uid，则从store获取
				const storeUid = this.$store.state.memberuid;
				if (storeUid) {
					this.uid = storeUid;
					console.log('UID set from store in onLoad:', this.uid);
				} else {
					console.log('No uid available in route params or store');
				}
			}
			
			// 只有在有uid的情况下才调用API
			if (this.uid) {
				this.getu_api();
			} else {
				console.warn('Cannot call getu_api: uid is not available');
			}
			
		},
		computed: {
		  yidenglu() {
		    return (this.$store.state.memberuid && this.$store.state.keycode) ? 1 : 0;
		  },
		  touxiang() {
		    return this.$store.state.member? this.$store.state.member.avatar : '';
		  },
		  name1() {
		    return this.$store.state.member? this.$store.state.member.name : '';
		  }
		},
		onReachBottom() {
  			this.onReachBottom(); //下拉加载分页
  		},

		methods: {
			//图片
			onImageLoad(e, index) {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowWidth;
				if(windowHeight >=920){
					var gao = 30;
					
				} else {
					var gao = 0;
				}


				this.$nextTick(() => {
        		    const query = uni.createSelectorQuery().in(this);
        		    query.select('#tupian-'+index).boundingClientRect(data => {
        		        if (data && data.width > 0 && data.height > 0) {
        		            this.$set(this.haibao_data[index], 'imageSize', {
        		                width: data.width,
        		                height: data.height + gao
        		            });
							console.log('图片尺寸:', this.haibao_data[index].imageSize);
        		        } else {
        		            console.warn(`图片${index}尺寸获取失败`);
        		            this.$set(this.haibao_data[index], 'imageSize', {
        		                width: 300,
        		                height: 200
        		            });
        		        }
        		    }).exec();
        		});

    		},
			getRightColWidth() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowWidth = systemInfo.windowWidth;
				var d = this;

                this.$nextTick(() => {
				if(windowWidth >=1221){
					d.gao = 20;
					d.kuan_shu = 7;
					d.swiperHeight = '250';
				} else {
					d.gao = 10;
					d.kuan_shu = 12;
					d.swiperHeight = '120';

				}
				console.log('窗口高度:', windowWidth);

                 const query = uni.createSelectorQuery().in(this);
                 query.select('#youbiankuan').boundingClientRect(rect => {
                   if (rect) {
                     /*this.rightColWidth = `${rect.width+20}px`;
                     console.log('右侧列宽度:', this.rightColWidth);*/
					 	this.rightColWidth = `${rect.width-80}px`;
                    	this.rightColLeft = `${rect.left}px`; // 计算左侧位置
                    	console.log('右侧列位置:', this.rightColWidth);
                   }
                 }).exec();
               });
            },

			
			
			setLeftNavHeight() {
        	    // 获取系统信息
        	    const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowHeight;
        	    const headerHeight = 70; // 头部高度估计值
        	    const calculatedHeight = windowHeight - headerHeight;
				
        	    // 设置左边导航高度
        	    this.leftNavHeight = `${calculatedHeight}px`;
        	},
			
			
			handleLoginSuccess() {
  			  this.$forceUpdate();
  			},
			
			
			
			
			denglu_fabu(){
				if(this.yidenglu == 0){
					this.denglu_xianshi = 1;
					
				} else {
					this.denglu_xianshi = 0;
						
				}
				
				console.log('发布登录',this.denglu_xianshi);
				
			},
			// 更新判断是否登录
			handleUpdateDengluxianshi(value) {
			  this.denglu_xianshi = value;
			  
			  console.log('关闭登录',this.denglu_xianshi);
			},
			// 退出登录
			handleLogout() {
 			  
 			  this.godenglu(); // 暂时注释掉自动跳转，便于调试
			   
 			},
			
			
			
			
			
			//个人信息
			getu_api(){
				console.log('Calling getu_api with uid:', this.uid);
				var uid = this.$store.state.memberuid;
				var keycode = this.$store.state.keycode;
				const data = {
						uid: this.uid,
						api_auth_uid: this.uid,
						api_auth_code: keycode,
					}
				var get_data = getRequest(UApi.getU(),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						if(this.uid){
							//this.u_data = res.data.data.wo;
						} else {
							//this.u_data = res.data.data.u;
						}
						this.u_data = res.data.data;
						//this.u_data = res.data.data;
						this.dataLoaded = true;
						
					}
				})

			},
			//跳转个人信息
			godenglu(){
				//保持url到缓存，名称是u_url
				uni.setStorageSync('go_url', this.$route.fullPath);
				uni.navigateTo({
					url: '/pages/u/denglu',
				})
			},

			
			
			
			tuichu(){
				uni.showToast({
					title: "退出成功",
					icon: 'success',
					
				})

				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('memberuid');
				uni.removeStorageSync('keycode');
				uni.removeStorageSync('member');
				// 通过 mutations 更新 Vuex 状态
				this.$store.commit('setMember', {});
    			this.$store.commit('setMemberUid', '');
    			this.$store.commit('setKeycode', '');
				//this.yidenglu = 0;
				// 触发退出事件
				this.$emit('logout-success');
				//退出跳转到首页
				uni.reLaunch({ url: "/pages/index/index" });
			},
			url(urls){
				uni.navigateTo({
					url: '/pages/u/'+urls,
				})
			}





		}
	}
</script>

<style>
/*引入css main.css*/

	.content {
		
		
		display: flex;
		flex-direction: column;
		/*align-items: center;*/
		
		background-color: #f3f3f3;
		
		margin-bottom: 0px;
		
		/*height: 100vh;*//* 添加全屏 */
		/*width: 100vw;*/ /* 添加全屏*/
		box-sizing: border-box;
		overflow-x: hidden;

		
		

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* 屏幕宽度大于786px时隐藏uni-page-head */
    @media (min-width: 786px) {
        uni-page-head {
            display: none !important;
            opacity: 0 !important;
            height: 0 !important;
            visibility: hidden !important;
        }
    }
	/*.d-daohang{
		
		width: 600rpx;
	}*/
	/* 添加在style部分 */
	.d-daohang-zuo {
    position: fixed;
    left: 0;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #f5f5f5;
    z-index: 100;
	box-shadow: 2px 0 5px rgba(177, 177, 177, 0.1);
  }
  
  .d-daohang-you {
    position: fixed;
    left: 180rpx;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #fff;
    z-index: 100;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
   
   
   
   
   
   
   
   
   
 
   
  .d-erji-item {
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
   /* border-bottom: 1px solid #f0f0f0;*/
  }
  
  .d-erji-item:active {
    background: #f5f5f5;
  }
  .you-guding {
	position: fixed;
	top: 0; /* 根据头部高度调整 */
	/*box-shadow: -2px 0 5px rgba(0,0,0,0.1);*/
	transition: all 0.3s ease;
}
/* 大于786px时的样式 */
@media screen and (min-width: 1024px) {
	.d-bianhua-10 {
		padding: 30px;
	}
	.pc-zuo-520 {
		margin-left: 520rpx;
	}
	.you-guding {
		position: fixed;
			
		top: 60px; /* 根据头部高度调整 */
		/*box-shadow: -2px 0 5px rgba(0,0,0,0.1);*/
		transition: all 0.3s ease;
	}
		
	
}
	
</style>
